<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">

    <title>阿冬网盘 - 注册 </title>
  
	<!-- Vendors Style-->
	<link rel="stylesheet" href="static/css/vendors_css.css">
	  
	<!-- Style-->  
	<link rel="stylesheet" href="static/css/style.css">
	<link rel="stylesheet" href="static/css/skin_color.css">	
	<script src="js/jquery-1.12.4.min.js"></script>

</head>

<body class="hold-transition theme-primary bg-img" style="background-image: url(./img/reg_bg.jpeg)">
	
	<div class="container h-p100">
		<div class="row align-items-center justify-content-md-center h-p100">
			
			<div class="col-12">
				<div class="row justify-content-center no-gutters">
					<div class="col-lg-5 col-md-5 col-12">
						<div class="bg-white rounded30 shadow-lg">
							<div class="content-top-agile p-20 pb-0">
								<h2 class="text-primary">开始使用阿冬网盘</h2>
								<p class="mb-0">注册新会员</p>							
							</div>
							<div class="p-40">
								<form >
									<div class="form-group">
										<div class="input-group mb-3">
											<div class="input-group-prepend">
												<span class="input-group-text bg-transparent"><i class="ti-user"></i></span>
											</div>
											<input type="text" id="username" class="form-control pl-15 bg-transparent" placeholder="请输入您的用户名">
										</div>
									</div>
									<div class="form-group">
										<div class="input-group mb-3">
											<div class="input-group-prepend">
												<span class="input-group-text bg-transparent"><i class="ti-user"></i></span>
											</div>
											<input type="text" id="account" class="form-control pl-15 bg-transparent" placeholder="请输入您的账号">
										</div>
									</div>
									<div class="form-group">
										<div class="input-group mb-3">
											<div class="input-group-prepend">
												<span class="input-group-text bg-transparent"><i class="ti-mobile"></i></span>
											</div>
											<input type="text" id = "phone" class="form-control pl-15 bg-transparent" placeholder="请输入您的手机号">
										</div>
									</div>
									
				
									<div class="form-group">
										<div class="input-group mb-3">
											<div class="input-group-prepend">
												<span class="input-group-text bg-transparent"><i class="ti-lock"></i></span>
											</div>
											<input type="password" id="password" class="form-control pl-15 bg-transparent" placeholder="请输入您的密码">
										</div>
									</div>
									<div class="form-group">
										<div class="input-group mb-3">
											<div class="input-group-prepend">
												<span class="input-group-text bg-transparent"><i class="ti-lock"></i></span>
											</div>
											<input type="password" id="check_password" class="form-control pl-15 bg-transparent" placeholder="请再次输入您的密码">
										</div>
									</div>
									  <div class="row">
										<div class="col-12">
										  <div class="checkbox">
											<input type="checkbox" id="basic_checkbox_1">
											<label for="basic_checkbox_1" >我已同意阿冬网盘<a href="#" class="text-warning"><b>使用协议</b></a></label>
										  </div>
										</div>
										<!-- /.col -->
										<div class="col-12 text-center">
										  <button type="button" class="btn btn-info margin-top-10" onclick="reg()">注册</button>
										</div>
										<!-- /.col -->
									  </div>
								</form>				
								<div class="text-center">
									<p class="mt-15 mb-0">您已经有账号了?<a href="login.html" class="text-danger ml-5"> 登录</a></p>
								</div>
							</div>
						</div>								

					
					</div>
				</div>
			</div>			
		</div>
	</div>


	<!-- Vendor JS -->
	<script src="static/js/vendors.min.js"></script>
	<script src="static/js/chat-popup.js"></script>
    <script src="static/js/feather.min.js"></script>	
	
	<script>
			
	
	
	function reg(){
		
		//获取数据
		let username = $("#username").val();
		let account = $("#account").val();
		let phone = $("#phone").val();
		let password = $("#password").val();
		let check_password = $("#check_password").val();
		let isChecked = $('#basic_checkbox_1').prop('checked');
		
		
		
		if ($.trim(username) === '' || $.trim(account) === '' ||$.trim(phone) === ''  ||$.trim(password) === '' ||$.trim(check_password) === '') {
		  // str为空字符串
		  alert("请完整填写注册信息");
		  return;
		}
		//判断两次输入密码是否一致
		if(password !== check_password){
			alert("两次输入密码不一致");
			return;
		}

		if(!isChecked){
			alert("请同意注册协议");
			return;
		}
		
		$.ajax("/reg",{
			type:"POST",
			data:{
				username:username,
				account:account,
				phone:phone,
				password:password,
				check_password:check_password
			},
			success:function (data,textStatus){
					
					data = JSON.parse(data);
					if(data.statusCode == 2000){
						alert(data.errMsg+"跳转登录页面");
						location.href="login.html";
					}else{
						alert(data.errMsg);
						
					}
				
			}
		})
	}
		
		
	</script>
</body>
</html>
